<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link rel="stylesheet" th:href="@{/frontstatic/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/global.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/styles.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="utf-8" th:src="@{../lib/layui-v2.6.3/layui.js}"></script>
    <link th:href="@{../lib/layui-v2.6.3/css/layui.css}" media="all" rel="stylesheet">
    <script th:src="@{/frontstatic/fronJS/index.js}"></script>
    <script th:src="@{/js/template-web.js}"></script>
    <title>商品浏览</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<div class="content inner">
    <section  style="width: 250px;height: 200px;position:absolute;left:90px;top: 145px">
        <ul id="userUl">

        </ul>
    </section>
    <section class="filter-section clearfix">
        <ol class="breadcrumb">
            <li><a href="/skippage?url=index">首页</a></li>
            <li class="active">类别筛选</li>
        </ol>
    </section>
    <section class="item-show__div clearfix">
        <div class="pull-left">
            <div class="item-list__area clearfix" id="commditytableKind"></div>
            <div id="demo2" style="margin-left: 300px"></div>
        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
<script id="kindCommtityTemplate" type="text/template">
    {{each datebate value}}
    <div class="item-card" style="color: #FF6700">
        <a class="photo" href="/skipcommtotyitem?id={{value.id}}">
            <img  class="cover" src="{{value.exampleImage1}}">
            <div class="name">{{value.name}}</div>
        </a>
        <div class="middle">
            <div class="price"><small>￥</small>{{value.price}}</div>
        </div>
    </div>
    {{/each}}
</script>
</body>
<script>
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        var count=20;
        var kid= getQueryString("id");
        function getdate(obj){
            $.ajax({
                type : "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url:"/kind/pageCommtity",
                async : true,
                data: JSON.stringify(obj),
                success : function(date){
                    document.getElementById("commditytableKind").innerHTML = "";
                    count=date.data.total
                    date = {datebate: date.data.records}
                    mera = template("kindCommtityTemplate", date);
                    $("#commditytableKind").append(mera);
                }
            })
        }
        var kindVo={
            "id":kid,
            "page":1,
            "limit":20
        }
        $.ajax({
            type : "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url:"/kind/pageCommtity",
            async : false,
            data: JSON.stringify(kindVo),
            success : function(date){
                count=date.data.total
            }
        })
        //自定义样式
        laypage.render({
            elem: 'demo2'
            ,count: count
            ,limit:20
            ,theme: '#787b7d'
            ,jump: function(obj, first){
                var kindvo1kindvo={
                    "id":kid,
                    "page":obj.curr,
                    "limit":obj.limit
                }
                getdate(kindvo1kindvo)
            }
        });
    });
</script>
</html>